import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../home.dart';
import '../../../../shared/shared.dart';

class MeTags extends GetView<HomeLogic> {
  const MeTags({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      margin: const EdgeInsets.all(20),
      decoration: BoxDecoration(
          border: Border.all(color: ColorConstants.themeColor.withOpacity(0.60), width: 1)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSignature(),
          Obx(() => _signature()),
          _myTags(),
          Obx(() => _buildTags()),
        ],
      ),
    );
  }

  Container _buildTags() {
    return Container(
      margin: const EdgeInsets.all(10),
      child: GridView.builder(
        shrinkWrap: true,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 2.74,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
        ),
        itemCount: controller.state.me.value.tags.length,
        itemBuilder: (BuildContext context, int index) => Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: ColorConstants.themeColor.withOpacity(0.70),
              borderRadius: const BorderRadius.all(Radius.circular(20))),
          child: Text(controller.state.me.value.tags[index],
              style: const TextStyle(
                  color: ColorConstants.tagsColor,
                  fontSize: 11,
                  fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }

  Container _myTags() {
    return Container(
      margin: const EdgeInsets.all(10),
      child: const Text('MY TAGS:',
          style: TextStyle(color: ColorConstants.themeColor, fontSize: 18)),
    );
  }

  Container _signature() {
    return Container(
      margin: const EdgeInsets.fromLTRB(18, 0, 18, 0),
      child: Text(controller.state.me.value.signature,
          style: const TextStyle(
              color: ColorConstants.themeColor,
              fontSize: 22,
              fontWeight: FontWeight.bold)),
    );
  }

  Container _buildSignature() {
    return Container(
      margin: const EdgeInsets.all(10),
      child: const Text('个性签名:',
          style: TextStyle(color: ColorConstants.themeColor, fontSize: 18)),
    );
  }
}
